<script setup lang="ts">
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { useUserStoreHook } from "@/store/modules/user";
import { sendInstruct, HintInstruct } from "@/api/vap/cluster";
import { useVaStoreHook } from "@/store/modules/va";

const vaStore = useVaStoreHook();

const form = reactive<HintInstruct>({
  id: "",
  msg: "",
  title: "来自【" + useUserStoreHook()?.username + "】的提示",
  msgType: "info"
});

const clickSendInstruct = () => {
  form.id = vaStore.instructRowSessionId;
  sendInstruct(form)
    .then(() => {
      vaStore.sendInstructDialog = false;
    })
    .catch(e => {
      console.log(e);
      ElMessage.error(e.response.data.msg);
    });
};
</script>

<template>
  <div>
    <el-dialog
      v-model="vaStore.sendInstructDialog"
      title="发送客户端消息"
      width="30%"
      center
    >
      <el-form
        label-position="right"
        label-width="100px"
        :model="form"
        style="max-width: 460px"
      >
        <el-form-item label="标题">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.msg" />
        </el-form-item>
        <el-form-item label="消息类型">
          <el-radio-group v-model="form.msgType">
            <el-radio label="success"> 通知 </el-radio>
            <el-radio label="warning">警告</el-radio>
            <el-radio label="info">消息</el-radio>
            <el-radio label="error">错误</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="vaStore.sendInstructDialog = false"
            >取消</el-button
          >
          <el-button type="primary" @click="clickSendInstruct">
            发送
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
